<template>
	<view>
	    <view class="bg-img"></view>
	    <view class="container">
	    	<view class="content">
	    	    <view class="item" v-for="(item,i) in list" :key="i" @tap="toDetail(item.id)">
	    	        <view class="title">{{item.song}}</view>
	    	        <view class="img">
	    	            <image src="/static/img/music.png"></image>
	    	        </view>
	    	    </view>
	    	</view>
	    	<view class="load" v-if="notHave">
	    		没有更多数据了
	    	</view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				id: '',
				list: [],
				notHave: false,
				total:0
			}
		},
		methods: {
			// 详情页
			toDetail(id){
				uni.navigateTo({
					url:`/pages/detail/index?id=${id}`
				})
			},
			async getList(id,page) {
				let which = uni.getStorageSync("which")
				let ret=await this.$request({
					url:`/${which}/list`,
					data:{
						id,page
					}
				})
				this.list.push(...ret)
				if(ret.length==0){
					this.notHave=true
				}
			}
		},
		onLoad(options) {
			let id = options.id
			this.id=id
			if(this.notHave)return
			this.getList(id,this.page)
		},
		onReachBottom(){
			this.page++
			if(this.notHave)return
			this.getList(this.id,this.page)
		}
	}
</script>

<style>
	.container{
		min-height: 500rpx;
		background-color: #fff;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
	}
	.load{
		box-sizing: border-box;
		padding: 20rpx;
		text-align: center;
		color:#888;
	}
	.bg-img{
	    background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic134.nipic.com%2Ffile%2F20170626%2F24946799_162737480034_2.jpg&refer=http%3A%2F%2Fpic134.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643543732&t=c575a21888305f54d09002271ed68b2a) center no-repeat;
	    width:100%;
	    height:560rpx;
	    background-size:cover ;
	    position: fixed;
	    top:0;
	    left:0;
	    z-index: -1;
	}
	.content{
	    margin-top: 400rpx;
	    width: 100%;
	    border-top-left-radius: 80rpx;
	    border-top-right-radius: 80rpx;
	    background: #fff;
	    box-sizing: border-box;
	    padding: 20rpx;
	}
	.item{
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    box-sizing: border-box;
	    padding: 20rpx;
	    border-bottom:2rpx solid #e8e8ee
	}
	.title{
	    width:70%
	}
	.img{
	    width:15%
	}
	.item image{
	    width:100rpx;
	    height:100rpx
	}
</style>
